<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { userList } from '@/hooks/index.js'
import { deliveryList } from '@/apis/task.js'
const parmes = {
	page: 1,
	pageSize: 10,
	status: 6
}
const { getList, goButton, Refresh, list, isTriggered } = userList(deliveryList, parmes)
console.log('列表', list)
</script>

<template>
	<view class="task-search">
		<view class="search-bar">
			<text class="iconfont icon-search"></text>
			<input class="input" type="text" placeholder="输入任务编号" />
		</view>
		<view class="filter-bar">
			<picker class="picker" mode="date">2023.05.20</picker>
			<text class="text">至</text>
			<picker class="picker" mode="date">结束时间</picker>
			<button disabled class="button">筛选</button>
		</view>
	</view>
	<scroll-view @scrolltolower="goButton" @refresherrefresh="Refresh" refresher-enabled :refresher-triggered="isTriggered" scroll-y class="scroll-view">
		<view class="scroll-view-wrapper cp">
			<view v-if="list.length > 0" v-for="item in list" :key="item.id" class="task-card">
				<navigator hover-class="none" url="/subpkg_task/detail/index?id=001">
					<view class="header">
						<text class="no">任务编号: {{ item.id }}</text>
					</view>
					<view class="body">
						<view class="timeline">
							<view class="line">{{ item.startAddress }}</view>
							<view class="line">{{ item.endAddress }}</view>
						</view>
					</view>
				</navigator>
				<view class="footer flex">
					<view class="label">提货时间</view>
					<view class="time">{{ item.created }}</view>
				</view>
			</view>
			<view v-else class="task-blank">无完成货物</view>
		</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
@import './styles.scss';
.cp {
	margin-bottom: 240rpx;
}

.task-search {
	padding: 30rpx;
	// margin-top: -1rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;

	.search-bar {
		position: relative;

		.icon-search {
			position: absolute;
			top: 22rpx;
			left: 24rpx;
			color: $uni-secondary-color;
			font-size: $uni-font-size-small;
		}

		.input {
			height: 72rpx;
			background-color: #f4f4f4;
			border-radius: 72rpx;
			padding-left: 72rpx;
			font-size: $uni-font-size-small;
		}
	}

	.filter-bar {
		display: flex;
		margin-top: 30rpx;
		font-size: $uni-font-size-small;
		text-align: center;
		line-height: 64rpx;
		color: $uni-secondary-color;

		.picker {
			width: 230rpx;
			height: 64rpx;
			border-radius: 64rpx;
			background-color: $uni-bg-color;
		}

		.text {
			margin: 0 24rpx;
		}

		.button {
			width: 120rpx;
			height: 64rpx;
			padding: 0;
			margin-left: 40rpx;
			line-height: 64rpx;
			border-radius: 64rpx;
			font-size: $uni-font-size-small;
			color: #fff;
			background-color: $uni-primary;

			&[disabled] {
				background-color: #fadcd9;
			}
		}
	}
}
</style>
